<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>Demo - SplitButton</title>
<link href="../../../css/assets/dpl/base.css" rel="stylesheet"/>
<link href="../assets/custombutton.css" rel="stylesheet"/>
<link href="../../../menubutton/demo/assets/menubutton.css" rel="stylesheet"/>
<link href="../../../menu/demo/assets/menu.css" rel="stylesheet"/>
<link href="../../../menu/demo/assets/menuitem.css" rel="stylesheet"/>
<link href="../../../menu/demo/assets/submenu.css" rel="stylesheet"/>
<style>
    h1 {
        font-size: 2em;
        margin: 10px;
        text-align: center;
    }

    h2 {
        font-size: 1.5em;
        margin: 10px;
        text-align: center;
    }

    #wrap {
        width: 90%;
        margin: 0 auto;
    }

    .empty-button .ks-menu-button-content {
        overflow: hidden;
        padding: 0;
        font-size: 0;
        height: 18px;
        margin-right: 10px;
    }
</style>
</head>
<body>
<div id="wrap">
    <h1>
        split button demo
    </h1>

    <div id="container">

    </div>
</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>

        KISSY.use("menubutton,button,menu", function (S, MenuButton, Button, Menu) {
            var $ = S.all;

            var b = new Button({
                id:'button-test1',
                content:"已买到的宝贝",
                elCls:'ks-button-collapse-right',
                render:'#container',
                listeners:{
                    click:function () {
                        S.log(this.get("content"));
                    }
                }
            }).render();

            new MenuButton({
                content:"",
                render:'#container',
                matchElWidth:false,
                collapseOnClick:true,
                elCls:'ks-button-collapse-left empty-button',
                menu:{
                    children:[
                        {
                            content:"已买到的宝贝"
                        },
                        {
                            content:"已卖出的宝贝"
                        }
                    ]
                },
                listeners:{
                    click:function (e) {
                        b.set("content", e.target.get("content"));
                    }
                }
            }).render();
        });

</script>
</body>
</html>